<template>
    <div class="store">
        <div class="opeation">
            <div class="search">
                <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>

            <div class="add">
                <el-button type="primary" @click="add">新增</el-button>
            </div>
        </div>

        <el-table :data="storeList" style="width: 100%">
            <el-table-column prop="img" label="店铺logo">
                <template slot-scope="scope">
                    <img :src="scope.row.img" class="logo">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="店铺名称">
            </el-table-column>
            <el-table-column prop="minPrice" label="最低消费">
            </el-table-column>
            <el-table-column prop="shippingFee" label="配送费">
            </el-table-column>

            <el-table-column prop="address" label="地址">
                <template slot-scope="scope">
                    <span>{{ scope.row.province }}</span>
                    <span>{{ scope.row.city }}</span>
                    <span>{{ scope.row.region }}</span>
                    <span>{{ scope.row.address }}</span>

                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible.sync="dialogVisible" width="50%" :before-close="handleClose" @opened="opened">
            <div class="form-box">
                <Upload :imagePath="store.img" @setImagePath="setImagePath"></Upload>


                <el-input v-model="store.name" placeholder="店铺名称"></el-input>
                <el-input v-model="store.phoneNumber" placeholder="请输入手机号"></el-input>
                <el-input v-model="store.storekeeperId" placeholder="店主id"></el-input>
                <el-input v-model="store.typeId" placeholder="分类id"></el-input>

                <el-input v-model="store.minPrice" placeholder="最低价格"></el-input>
                <el-input v-model="store.shippingFee" placeholder="配送费"></el-input>

                <div class="point-box">
                    <el-input v-model="store.longitude" placeholder="经度"></el-input>
                    <el-input v-model="store.latitude" placeholder="纬度"></el-input>
                </div>

                <div class="address-box">
                    <el-input v-model="store.province" placeholder="省份"></el-input>
                    <el-input v-model="store.city" placeholder="城市"></el-input>
                    <el-input v-model="store.region" placeholder="地区"></el-input>
                </div>
                <el-input v-model="store.address" placeholder="详细地址"></el-input>

                <div class="map-box">
                    <el-input class="map-search" v-model="mapSearch" placeholder="请输入地址">
                        <el-button slot="append" icon="el-icon-search" @click="searchAddress"></el-button>
                    </el-input>
                    <div id="allmap"></div>
                </div>

                <el-input type="area" v-model="store.intro" placeholder="请输入简介"></el-input>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import Upload from '@/components/Upload/Upload.vue'
import ObjectNotEmpty from '@/utils/common/ObjectNotEmpty'
import api from '@/api/store'
import TypeApi from '@/api/type'
export default {
    components: {
        Upload
    },
    data() {
        return {
            dialogVisible: false,
            storeList: [],
            search: '',

            store: {
                "id": null,
                "name": "",
                "img": "",
                "storekeeperId": "",
                "province": "",
                "city": "",
                "region": "",
                "address": "",
                "longitude": "",
                "latitude": "",
                "phoneNumber": "",
                "score": null,
                "minPrice": null,
                "shippingFee": "",
                "intro": "",
                'typeId': '',
            },
            typeId: '',
            update: 0,
            dialogVisible: false,
            page: {
                current: 0,
                total: 0,
                pages: 0,
                size: 0,
            },
            map: null,
            mapSearch: "",
            imagePath: "",
        }
    },
    created() {
        this.getStoreList()
    },
    methods: {
        getStoreList() {

            this.$axios.post(api.GET_STORE_LIST,)
                .then(res => {
                    if (res.code == 200) {
                        this.storeList = res.data.storeList
                    }
                })
        },
        getTypeId(storeId){
            let data = {
                id:storeId
            }
            this.$axios.post(TypeApi.getTypeByStoreId, data)
            .then(res => {
                if(res.code == 200){
                    this.store.typeId = res.data.type.id
                }else this.$error(res.message)
            })
        },
        edit(data) {
            this.update = 1

            let keys = Object.keys(this.store)

            for (let i = 0; i < keys.length; i++) {
                let key = keys[i]

                this.store[key] = data[key]
            }

            console.log(this.store)
            //获取分类id
            this.getTypeId(data.id)
            this.dialogVisible = true;
        },
        del(data) {
            this.$axios.delete(api.DELETE_STORE, {data})
            .then(res => {
                if(res.code == 200){
                    this.$success(res.message)
                    this.getStoreList()
                }
                else{
                    this.$error(res.message)
                }
            })
        },
        confirm() {

            let data = this.store

            //判断是修改还是添加
            //修改数据
            if (this.update == 1) {
                //检查数据是否都不为空
                if (this.imagePath) this.store.img = this.imagePath
                if (!ObjectNotEmpty(data, ['score'])) {
                    this.$error("请填写完整信息")

                    return
                }

                this.$axios.put(api.UPDATE_STORE, data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$success(res.message)
                            this.getStoreList()
                            this.dialogVisible = false
                        } else {
                            this.$error(res.message)
                        }
                    })
            }
            //添加数据
            else {
                //检查数据是否都不为空
                if (this.imagePath) this.store.img = this.imagePath
                if (!ObjectNotEmpty(data, ['score', 'id'])) {
                    this.$error("请填写完整信息")

                    return
                }
                this.$axios.post(api.ADD_STORE, data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$success(res.message)
                            this.getStoreList()
                            this.dialogVisible = false
                        } else {
                            this.$error(res.message)
                        }
                    })
            }


        },
        createMap() {
            if (this.map != null) return

            this.map = new BMapGL.Map("allmap");
            this.map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 19);
            this.map.enableScrollWheelZoom(true);

            let map = this.map

            var geolocation = new BMapGL.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMapGL.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                }
            });

            let that = this

            let geoc = new BMapGL.Geocoder();
            this.map.addEventListener('click', function (e) {
                that.store.longitude = e.latlng.lng
                that.store.latitude = e.latlng.lat




                let pt = e.latlng;

                map.clearOverlays();

                var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
                map.addOverlay(marker);

                geoc.getLocation(pt, function (rs) {
                    var addComp = rs.addressComponents;

                    console.log(addComp, "addComp")

                    that.store.province = addComp.province
                    that.store.city = addComp.city
                    that.store.region = addComp.district
                    that.store.address = addComp.street + addComp.streetNumber
                })
            });
        },
        add() {
            this.update = 0

            this.dialogVisible = true;
        },
        searchAddress() {
            let map = this.map
            var local = new BMapGL.LocalSearch(map, {
                renderOptions: { map: map }
            });
            local.search(this.mapSearch);

        },
        setImagePath(val) {
            this.store.img = val
        },
        opened() {
            this.createMap()
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}
</script>

<style scoped>
.logo {
    width: 50px;
    height: 50px;
}

.form-box .el-input {
    margin: 10px 0;
}


.opeation {
    display: flex;
    justify-content: space-between;

    margin: 10px 0;
}

.map-box {
    position: relative;
}

.map-search {
    position: absolute;
    ;
    width: 250px;
    left: 10px;

    z-index: 999;
}

.search {
    width: 60%;
}

#allmap {
    width: 100%;
    height: 300px;
}
</style>